import { Row, Col } from 'antd';
import BaseProps from '../base/Props';
import { WeaSelect, WeaInputNumber, WeaCheckbox, WeaLocaleProvider } from 'ecCom';
import { heightOpts, defaultHeight, heightKeys } from './data';
import './Props.less';

const { getLabel } = WeaLocaleProvider;

const HeightSelect = ({ height, onChange }) => {
  const isCustom = heightKeys.Custom === height.key;
  const [firstSpan, secondSpan] = isCustom ? [8, 15] : [24];

  return (
    <div>
      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@x5fv5e`}>
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@g6xnze`} span={firstSpan}>
          <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ojapa2`} options={heightOpts} value={height.key} onChange={v => onChange('key', v)} />
        </Col>
        {!isCustom ? null :
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1q50jg`} span={secondSpan} offset={1}>
            <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@usnq1z`} value={height.value} min={0} onChange={v => onChange('value', v)} />
          </Col>
        }
      </Row>
    </div>
  );
};

export default class DataTableProps extends BaseProps {
  onHeightChange = (k, v) => {
    const { height = defaultHeight } = this.props.data;

    if ('value' === k) {
      v = Math.max(v, 0);
      v = isNaN(v) ? 0 : v;
    }

    this.props.onChange('height', {
      ...height,
      [k]: v
    });
  }

  renderContent() {
    const { height = defaultHeight } = this.props.data;
    
    return (
      <React.Fragment ecId={`${this && this.props && this.props.ecId || ''}_Fragment@cf7ynp`}>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@vtq50r`} className='edc-row-hor'>
          <label>{getLabel('511768','高度')}</label>
          <HeightSelect ecId={`${this && this.props && this.props.ecId || ''}_HeightSelect@50j70m`} height={height} onChange={this.onHeightChange} />
        </Row>
        <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@nytpxc`}>
          <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@tglmz4`}
            content={getLabel('510262', '手机端添加子页面滑出展示')}
            value={this.props.data.suspension}
            onChange={this.handlePropChange('suspension')}
          />
        </Row>
   </React.Fragment>
    )
  }
}